<template>
	<view>
		<view class="container-top">
			<view class="ct-img">
				<img src="@/static/img1.jpg" alt="" style="width: 100%; height: 100%;">
			</view>
			<view class="ct-content">
				<view class="ct-avatar">
					<img :src="userInfo.schoolLogo" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
				</view>
				<view class="ct-name" >
					{{userInfo.name}}
				</view>
				<view class="ct-change" @click="schoolSwitch">
					<view class="" style="margin-top: 10rpx;">
						<image src="../../../static/index/qiehuan.png" mode="" style=" width: 40rpx;height: 40rpx;"></image>
					</view>
					切换校区
				</view>
				
			</view>
		</view>
		<view class="container-center">
			<view class="" v-if="teachImgList.length != 0">
				<view class="cc-name">教学环境</view>
				<view class="cc-img" @click="imgDetail" >
					<view class="img-left">
						<img :src="teachImgList[0]" alt=""
							style="width: 100%; height: 100%; border-radius: 20rpx 0 0 20rpx;">
					</view>
					<view class="img-right">
						<view class="right-top">
							<img :src="teachImgList[1]" alt=""
								style="width: 100%; height: 100%;border-radius: 0rpx 20rpx 0 0rpx;">
						</view>
						<view class="right-top" style="margin-top: 10rpx;position: relative;">
							<img :src="teachImgList[2]" alt=""
								style="width: 100%; height: 100%;border-radius: 0rpx 00rpx 20rpx 0rpx;">
							<view class="img-num">
								<u-icon name="photo"></u-icon>{{teachImgList.length}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ci-addresstitle" v-if="teachImgList.length == 0">地址</view>
			<view class="cc-info">
				<view class="ci-address">
					{{userInfo.address}}
				</view>
				<view class="ci-imgone">
					<img src="@/static/index/car.png" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
				</view>
				<view class="ci-imgone" style="margin-left: 70rpx;" @click="telShowBtn">
					<img src="@/static/index/tel.png" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
				</view>
			</view>
			<view class="ci-space"></view>
			<view class="ci-content">
				<view class="" v-for="(item,index) in courseList" :key="index">
					<view class="course-content" @click="introBtn(index)">
						<view class="course-img">
							<img :src="item.img" alt="" style="width: 100%; height: 100%;">
						</view>
						<view class="course-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-zone" :style="{'margin-top':(teachImgList.length != 0 ? '750rpx' :'300rpx')}">
			我的专区
		</view>
		<view class="zone-container">
			<view class="" v-for="(item,index) in zoneList" :key="index">
				<view class="zine-content" @click="zoneBtn(index)">
					<view class="zc-left">
						<view class="zc-title">{{item.title}}</view>
						<view class="zc-intro">{{item.intro}}</view>
					</view>
					<view class="zc-right">
						<img :src="item.img" alt="" style="width: 100%; height: 100%;">
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	
	export default {
		props:{
			userInfo:Object
		},
		data() {
			return {
				teachImgList:[],
				courseList: [
					{
							img: '../../../static/index/kecheng.png',
							name: "教学课程"
						},{
						img: '../../../static/index/semester.png',
						name: "选课报名"
					},
					{
						img: '../../../static/index/youxiu.png',
						name: "优秀作品"
					},{
						img: '../../../static/index/jingcai.png',
						name: "精彩活动"
					},
					],
				zoneList: [{
					title:'我的优惠券',
					intro:'报名抵用',
					img:'../../../static/index/youhui2.png'
				}, 
				{
					title:'我的试听',
					intro:'已申请试听课',
					img:'../../../static/index/shiting2.png'
				},
				{
					title:'我的报名',
					intro:'在线报名课程',
					img:'../../../static/index/baoming.png'
				},
				{
					title:'学员绑定',
					intro:'绑定报名学院',
					img:'../../../static/index/bangding.png'
				},],
				
			}
		},
		methods: {
			schoolSwitch(){
				uni.navigateTo({
						url: '/pages/index/schoolSwitching'
					})	
			},
			telShowBtn(){
				uni.$emit("telShow",true)
			},
			introBtn(index){
				if(index === 0){
				uni.navigateTo({
						url: '/pages/course/courseList'
					})	
				}else if(index === 1){
					uni.navigateTo({
							url: '/pages/index/applicateOnline'
						})	
				}else if(index === 2){
					uni.navigateTo({
							url: '/pages/index/worksExcellence'
						})	
				}else if(index === 3){
					uni.navigateTo({
							url: '/pages/index/excitingActivities'
						})	
				}
			},
			zoneBtn(index){
				if(index === 0){
				uni.navigateTo({
						url: '/pages/my/coupon'
					})	
				}else if(index === 1){
					uni.navigateTo({
							url: '/pages/my/audition'
						})	
				}else if(index === 2){
					uni.navigateTo({
							url: '/pages/my/myApplication'
						})	
				}else if(index === 3){
					uni.navigateTo({
							url: '/pages/my/studentBinding'
						})	
				}
			}
		}
	}
</script>

<style>
.container-top {
		position: relative;
	}

	.ct-img {
		width: 100%;
		height: 300rpx;
	}

	.ct-content {
		display: flex;
		justify-content: start;
		position: absolute;
		top: 30rpx;
		width: 100%;
	}

	.ct-avatar {
		width: 100rpx;
		height: 100rpx;
		margin-left: 40rpx;

	}

	.ct-name {
		color: #fcfcfc;
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 18rpx;
		margin-left: 20rpx;

	}

.ct-change {
		width: 180rpx;
		height: 55rpx;
		background-color: #0c1f30;
		color: #fcfcfc;
		font-size: 24rpx;
		text-align: center;
		line-height: 55rpx;
		border-radius: 40rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;


	}
.ci-addresstitle{
	font-weight: bold;
	margin: 20rpx 0 20rpx 20rpx;
	font-size: 34rpx;
	
	
}
	.container-center {
		width: 95%;
		// height: 500rpx;
		background-color: #ffffff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 180rpx;
		border-radius: 30rpx;

	}

	.cc-name {
		margin-left: 20rpx;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
		margin-top: 35rpx;
	}

	.cc-img {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
	}

	.img-left {
		width: 420rpx;
		height: 390rpx;

	}

	.right-top {
		width: 240rpx;
		height: 190rpx;
	}

	.img-num {
		width: 120rpx;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background-color: #0c1f30;
		opacity: .7;
		color: #ffffff;
		border-radius: 20rpx;
	}

	.cc-info {
		display: flex;
	}

	.ci-address {
		width: 390rpx;
		margin-left: 20rpx;
		font-size: 26rpx;
	}

	.ci-imgone {
		margin-left: 60rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.ci-space {
		width: 94%;
		height: 2rpx;
		background-color: #e8e8e8;
		margin: 20rpx auto;
	}

	.ci-content {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;

	}

	.course-img {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.course-content {
		width: 150rpx;

	}

	.course-name {
		text-align: center;
		margin-top: 20rpx;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.my-zone {
		
		margin-left: 40rpx;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.zone-container {
		width: 95%;
		background-color: #ffffff;
		// height: 300rpx;
		margin: 20rpx auto;
		border-radius: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx 20rpx;

	}

	.zine-content {
		width: 330rpx;
		height: 150rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		background-color: #f3f3f3;
		border-radius: 16rpx;
		display: flex;
		position: relative;
	}

	.zc-left {
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.zc-title {
		font-size: 30rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.zc-intro {
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #656565;
		width: 180rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.zc-right {
		width: 100rpx;
		height: 100rpx;

		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		
	}
</style>
